<template>
  <div class="cascader">
    <el-cascader ref="cascader"
                 style="width:100%;"
                 filterable
                 clearable
                 v-bind="$attrs"
                 :value="selectedValue"
                 :props="areaProps"
                 :options="areaOptions"
                 :filter-method="filterArea"
                 @change="handleChange">
      <template slot-scope="{ data }">
        <span>{{ data.name }}</span>
        <span v-if="data.lastRelationName"> ({{ data.lastRelationName }}) </span>
      </template>
    </el-cascader>
  </div>
</template>

<script>
import { loadAreaTree } from "@basic/area.js"
export default {
  name: "AreaSelect",
  inheritAttrs: true,
  props: {
    areaValue: [Object, Array, String],
    checkStrictly: {
      type: Boolean,
    },
  },
  data () {
    return {
      areaTree: [],
      selectedValue: [],
    }
  },
  computed: {
    areaProps () {
      return {
        label: 'name',
        value: 'name',
        checkStrictly: this.checkStrictly
      }
    },
    areaOptions () {
      return this.areaTree;
    },
    selectedArea () {
      const [provinceName, cityName, districtName] = this.selectedValue;
      const selectedProvince = this.areaOptions.filter(area => area.name === provinceName)?.[0];
      if (!selectedProvince?.children) {
        return { provinceName, cityName, districtName, province: selectedProvince?.name };
      }
      const selectedCity = selectedProvince?.children.filter(area => area.name === cityName)?.[0];
      if (!selectedCity?.children) {
        return { provinceName, cityName, districtName, province: selectedProvince.name, city: selectedCity?.name };
      }
      const selectedDistrict = selectedCity?.children.filter(area => area.name === districtName)?.[0];
      const { name: province } = selectedProvince;
      const { name: city } = selectedCity;
      const { name: district } = selectedDistrict || {};
      return { provinceName, cityName, districtName, province, city, district }
    },
  },
  watch: {
    areaValue (val) {
      this.selectedValue = this.formatValue(val);
    }
  },
  created () {
    this.loadAreaTree();
  },
  methods: {
    formatValue (val) {
      if (!val) {
        return []
      }
      const { provinceName, cityName, districtName } = val;
      return [provinceName, cityName, districtName]
        .filter(value => !!value);
    },
    async loadAreaTree () {
      this.areaTree = await loadAreaTree();
      this.selectedValue = this.formatValue(this.areaValue);
    },
    handleChange (val) {
      this.selectedValue = val;
      const length = Object.values(this.selectedArea)
        .filter(code => !!code).length;
      const selectedArea = length > 0 ? this.selectedArea : null;
      this.$emit('confirm', selectedArea);
    },
    filterArea (node, keyword) {
      node.tips = node.text
      node.text = node.data?.lastRelationName ? `${node.text} (${node.data.lastRelationName})` : node.text
      node.tips = node.data?.relationName ? `${node.tips} (${node.data.relationName})` : node.tips
      if (node.parent?.data) {
        let cityname = node.text.split('/')[1]
        if (node.parent?.data?.lastRelationName)
          node.text = node.text.replace(cityname, `${cityname}(${node.parent?.data?.lastRelationName})`)
        if (node.parent?.data?.relationName)
          node.tips = node.tips.replace(cityname, `${cityname}(${node.parent?.data?.relationName})`)
      }
      if (node.parent?.parent?.data) {
        let province = node.text.substring(0, node.text.indexOf('/'))
        if (node.parent?.parent?.data?.lastRelationName)
          node.text = node.text.replace(province, `${province}(${node.parent?.parent?.data?.lastRelationName})`)
        if (node.parent?.parent?.data?.relationName)
          node.tips = node.tips.replace(province, `${province}(${node.parent?.parent?.data?.relationName})`)
      }
      if (!!~node.tips.indexOf(keyword) || !!~node.tips.toUpperCase().indexOf(keyword.toUpperCase())) {
        return true
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cascader {
  .el-cascader.el-cascader--small {
    width: 100% !important;
  }
}
</style>